<style>
.menu {
  position: absolute;
  height: 100px;
  width: 80px;
  background-color: rgb(0, 0, 0, 0.7);
  top: 0;
  z-index: 9999;
}
.opt-bar {
  position: absolute;
  width: 100%;
  top: 0;
  background-color: rgb(0, 0, 0, 0.5);
  display: flex;
  flex-flow: row;
  justify-content: flex-end;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  z-index: 1000;
}
.btn {
  width: 70px;
  /* text-align: center;
    line-height: 35px;
    height: 35px;
    font-size: 14px;
    background-color: #fff;
    border-radius: 600px; */
  cursor: pointer;
  margin-left: 20px;
}
.menu p {
  cursor: pointer;
  margin-top: 20px;
}
</style>

<template>
  <div
    style="position: relative"
    :style="{ height: height + 'px', width: width + 'px' }"
  >
    <div class="opt-bar">
      <button class="btn" @click="add()">添加</button>
      <button class="btn" @click="save()">保存</button>
    </div>
    <div
      id="container"
      :style="{ height: height + 'px', width: width + 'px' }"
      tabindex="0"
    ></div>
    <div
      class="menu"
      :style="{ top: top + 'px', left: left + 'px' }"
      v-show="showMenu"
    >
      <p @click="edit()" style="color: #fff">编辑</p>
      <p @click="del()" style="color: #fff">删除</p>
    </div>
  </div>
</template>
<script>
export default {
  name: "MapTool",
  props: ["width", "height", "farmId", "list"],
  data() {
    return {
      map: null,
      mapTool: null,
      markers: [],
      top: 0,
      left: 0,
      showMenu: false,
      currentObj: null,
    };
  },
  watch: {
    list(n, o) {
      console.log(n, o);
    },
  },
  mounted() {
    console.log(this.list);
    this.map = new AMap.Map("container", {  
      
    });
    this.init();
    var _this=this;
    this.map.on('rightclick',function(){
      _this.close();
    })
  },

  methods: {
    init() {
      for (let index = 0; index < this.list.length; index++) {
        const element = this.list[index];
        var path=[];
        for (let i = 0; i < element.path.length; i++) {
          const item = element.path[i];
          path.push([item.lng, item.lat])
        }
        var p = new AMap.Polygon({  
          path: path,
          fillColor: "#00b0ff",
          strokeColor: "#80d8ff",
          extData: element.id,
          zindex:1000,
        });   
        this.markers.push(p);
        this.onRightClick(p);
      }
      // console.log(this.markers);
      this.map.add(this.markers);
      this.map.setFitView();
    },
    createId() {
      return this.farmId + "-" + new Date().getTime();
    },
    //添加
    add() {
      var _this = this;
      this.map.plugin(["AMap.MouseTool"], function () {
        //在地图中添加MouseTool插件
        _this.mouseTool = new AMap.MouseTool(_this.map);
        //监听draw事件可获取画好的覆盖物

        _this.mouseTool.on("draw", function (e) {
          var id = _this.createId();
          e.obj.setExtData(id);
          _this.markers.push(e.obj);
          _this.onRightClick(e.obj);
          _this.mouseTool.close(false);
        });
        _this.draw("polygon");
      });
    },
    //编辑
    edit() {
      var _this = this;
      _this.map.plugin(["AMap.PolyEditor"], function () {
        // 实例化多边形编辑器，传入地图实例和要进行编辑的多边形实例
        var PolygonEditor = new AMap.PolyEditor(_this.map, _this.currentObj);
        _this.editor = PolygonEditor;
        // 开启编辑模式
        PolygonEditor.open();
      });
      this.showMenu = false;
    },
    //删除
    del() {
      console.log(this.currentObj.getExtData());
      for (let index = 0; index < this.markers.length; index++) {
        const element = this.markers[index];
        console.log(element.getExtData());
        if (element == this.currentObj) {
          this.currentObj.setMap(null);
          this.currentObj = null;
          this.markers.splice(index, 1);
        }
      }
      this.showMenu = false;
    },
    //取消编辑
    close(){
      if(this.editor!=null){
        this.editor.close();
      }
    },
    //保存
    save() {
      var list = [];
      for (let index = 0; index < this.markers.length; index++) {
        const element = this.markers[index];
        var path = element.getPath();
        var id = element.getExtData();
        list.push({ id, path });
      }
      console.log(list);
      this.$emit("update:list", list);
    },
    //监听右键事件
    onRightClick(obj) {
      var _this = this;
      obj.on("rightclick", function (p) {
        _this.showMenu = true;
        _this.top = p.originEvent.clientY - 100;
        _this.left = p.originEvent.clientX;
        _this.currentObj = obj;
      });
    },
    draw(type) {
      switch (type) {
        case "marker": {
          this.mouseTool.marker({
            //同Marker的Option设置
          });
          break;
        }
        case "polyline": {
          this.mouseTool.polyline({
            strokeColor: "#80d8ff",
            //同Polyline的Option设置
          });
          break;
        }
        case "polygon": {
          this.mouseTool.polygon({
            fillColor: "#00b0ff",
            strokeColor: "#80d8ff",
            //同Polygon的Option设置
          });
          break;
        }
        case "rectangle": {
          this.mouseTool.rectangle({
            fillColor: "#00b0ff",
            strokeColor: "#80d8ff",
            //同Polygon的Option设置
          });
          break;
        }
        case "circle": {
          this.mouseTool.circle({
            fillColor: "#00b0ff",
            strokeColor: "#80d8ff",
            //同Circle的Option设置
          });
          break;
        }
      }
    },
  },
};
</script>
